import React, {Component} from 'react';

import Main from '../components/layout/Main';
import Logo from '../components/widget/Logo';
import Container from '../components/widget/Container';
import LeftContainer from '../components/widget/LeftContainer';
import SingleBlog from '../components/SingleBlog';
import RightContainer from '../components/widget/RightContainer';
import AboutMe from '../components/user/AboutMe';
import NewLetter from '../components/widget/NewLetter';

class Index extends Component {
	constructor (props) {
		super(props);
		this.state = {
			list: []
		};
	}

	componentDidMount () {
		setTimeout(() => {
			this.setState({
				list: [
					{
						id: 1,
						image: 'http://demo.shapedtheme.com/kotha-pro-html/assets/images/post-thumb-1.jpg',
						tag: 'TRAVEL',
						title: 'ADVENTURE TO TRAVEL LONELY',
						desc: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor ' +
							'invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam' +
							' et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est ' +
							'Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed' +
							' diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua',
						author: 'Jennifer',
						created_at: '2018-08-10 12:01:06'
					},

					{
						id: 2,
						image: 'http://demo.shapedtheme.com/kotha-pro-html/assets/images/post-thumb-2.jpg',
						tag: 'TRAVEL',
						title: 'PLAYING WITH KITE AT BEACH',
						desc: 'Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua Lorem ipsum dolor sit amet, consetetur sadipscing elitr...',
						author: 'Jennifer',
						created_at: '2018-08-10 12:15:06'
					},
					{
						id: 3,
						image: 'http://demo.shapedtheme.com/kotha-pro-html/assets/images/post-thumb-3.jpg',
						tag: 'TRAVEL',
						title: 'AT VERO EOS ETACCUSAM ET JUSTO DUO',
						desc: 'Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. sed diam voluptua Lorem ipsum dolor sit sadipscing elitr amet, consetetur ...',
						author: 'Jennifer',
						created_at: '2018-08-10 12:47:06'
					},
					{
						id: 4,
						image: 'http://demo.shapedtheme.com/kotha-pro-html/assets/images/post-thumb-4.jpg',
						tag: 'TRAVEL',
						title: 'AN IMAGINARY FOR TRAVELERS',
						desc: 'Magna aliquyam erat, Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Sed diam nonumy eirmod tempor invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. sed diam voluptua Lorem ipsum dolor sit sadipscing elitr amet, consetetur ...',
						author: 'Jennifer',
						created_at: '2018-08-10 12:47:06'
					}
				]
			});
		}, 50);
	}

	render () {
		let blogs = this.state.list.map((blog) => {
			return <SingleBlog data={blog} key={blog.id}/>;
		});
		return (
			<Main>
				<Logo/>
				<Container>
					<LeftContainer>
						{blogs}
					</LeftContainer>
					<RightContainer>
						<AboutMe/>
						<NewLetter/>
					</RightContainer>
				</Container>
			</Main>
		);
	}
}

export default Index;
